<template>
  <div class="user-detail" v-if="userDetailData">
    <el-card body-style="display:flex;align-items: center;">
      <el-avatar
        class="avatar"
        shape="square"
        :src="userDetailData.user.avatar"
      />
      <div class="user-info">
        <span>{{ userDetailData.user.name }}</span>
        <span>注册时间: {{ userDetailData.user.registerDate }}</span>
      </div>
    </el-card>
    <el-card class="contact" body-style="display:flex;flex-direction: column;">
      <span>联系方式: {{ userDetailData.contactWay }}</span>
      <span>ip 归属地: {{ userDetailData.ipLocation }}</span>
    </el-card>
    <el-tabs type="border-card">
      <el-tab-pane label="交友信息">
        <x-friendship :photos="userDetailData.photos"></x-friendship>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { userDetail } from "@/api/userAPI";

const router = useRoute();
const { id } = router.query;
const userDetailData = ref();
userDetail(id).then((data) => {
  userDetailData.value = data.data;
});
</script>

<style scoped>
.user-info {
  display: flex;
  flex-direction: column;
}

.user-detail {
  width: 50%;
}

.contact {
  margin-top: 10px;
  margin-bottom: 10px;
}

.avatar {
  margin-right: 10px;
}
</style>
